<script setup>
import { ref, computed, onMounted } from "vue";
import TodoItemTable from "../components/todoitemtable.vue"
import { getlist,add } from "../request/todolist"
import {TodoColumns} from "../models/columns"
defineProps({
  msg: String,
});

const itemvalue = ref("");
const listdata = ref([]);
const adddata =async () => {

if(!itemvalue.value){
  alert('不能为空')
  return
}
  const data = {
    itemname: itemvalue.value,
    state: 0,
    showInput: false,
  };

 const result= await add(data)

 if(result){
  getdata()
 }
};
onMounted(() => {
  
  getdata();
});

const searchdata =async () => { 
await getdata(itemvalue.value)

}; 
const getdata = async (searchText) => {
 listdata.value = await getlist(searchText);

};
const resetInput=(index)=>{ 
   debugger  
  for (let i = 0; i < listdata.value.length; i++) {

  if (i != index) listdata.value[i].showInput = false;
}
}

</script>

<template>
  <div class="card">
    <h1>{{ msg }}</h1>
    <input type="text" v-model="itemvalue" />
    <button type="button" @click="adddata">添加数据</button>

    <button type="button" @click="searchdata">搜索</button>
    <!-- <input type="checkbox" v-model="showAll" value="显示全部"> -->
    <button type="button" @click="getdata">获取后端数据</button>
    
    
    <!-- <table border="1">
        <tr>
            <th>代办事项</th><th>状态</th><th>管理</th>
        </tr>
        <tr v-for="(item, index) in listdata" :key="index">
            <TodoItem :item="item" @refresh="getdata"  @reset="resetInput(index)"></TodoItem>
        </tr>
    </table> -->



    <el-table :data="listdata" >
   

    <el-table-column label="待办事项">
      <template #default="scope">
        <span v-if="! scope.row.showInput"> {{  scope.row.itemname }}</span>

          <input type="text" v-model=" scope.row.itemname" v-if=" scope.row.showInput" />
      
      </template>
    </el-table-column>

  

    <el-table-column label="状态">
      <template #default="scope">
        <span v-if="!scope.row.showInput">
            {{ scope.row.state == 1 ? "完成" : "未完成" }}</span
          >
          <select v-model="scope.row.state" v-if="scope.row.showInput">
            <option value="0">未完成</option>
            <option value="1">完成</option>
          </select>
        
      </template>
    </el-table-column>
    <el-table-column label="管理">
      <template #default="scope">
          <TodoItemTable :item="scope.row" @refresh="getdata"  @reset="resetInput(scope.$index)"></TodoItemTable>
      </template>
    </el-table-column>


   </el-table>
  </div>


</template>
<style>
</style>